<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: `${editing ? '编辑' : '新增'}定金`,
			size: '40%',
			appendToBody: true
		}"
		showConfirm
		confirmText="提交"
		@close="reset"
		@confirm="submit"
		:saving="saving"
	>
		<el-form ref="form" label-position="top" :model="form" :rules="rules">
			<el-form-item label="定金信息">
				<el-card shadow="never">
					<el-row :gutter="20">
						<el-col :span="12" v-if="!editing">
							<el-form-item label="收款记录" prop="order_id">
								<cl-select
									v-model="form.order_id"
									placeholder="请选择收款记录"
									filterable
									style="width: 100%"
									:disabled="editing"
								>
									<el-option
										v-for="item in this.billList"
										:key="item.id"
										:label="item.name"
										:value="item.id"
									/>
								</cl-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="收取日期" prop="pay_date">
								<cl-date-picker
									v-model="form.pay_date"
									placeholder="选择日期"
									style="width: 100%"
									value-format="yyyy-MM-dd"
									:picker-options="pickerOptions"
									:disabled="editing && form.order_id !== ''"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="品牌" prop="bra_id">
								<cl-select
									v-model="form.bra_id"
									placeholder="请选择品牌"
									filterable
									style="width: 100%"
									:disabled="editing"
									@change="changeBra"
								>
									<el-option
										v-for="item in bizRefData.brand"
										:key="item.bra_id"
										:label="item.bra_name"
										:value="item.bra_id"
									/>
								</cl-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="所属门店" prop="dept_id">
								<cl-shop-select
									style="width: 100%"
									v-model="form.dept_id"
									placeholder="请选择所属门店"
									filterable
									:biz_id="detail.biz_id"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="转账方式" prop="pay_type">
								<cl-select
									v-model="form.pay_type"
									placeholder="请选择转账方式"
									style="width: 100%"
									:disabled="
										form.matching == true || (editing && form.order_id !== '')
									"
								>
									<el-option
										v-for="(item, index) in payTypeList"
										:key="index"
										:label="item.label"
										:value="item.value"
									/>
								</cl-select>
							</el-form-item>
						</el-col>

						<el-col :span="12">
							<el-form-item label="收取金额" prop="dep_amount">
								<cl-select
									v-model="form.dep_amount"
									placeholder="请选择收取金额"
									style="width: 100%"
									:disabled="
										form.matching == true || (editing && form.order_id !== '')
									"
								>
									<el-option
										v-for="item in depositConfigs"
										:key="item.id"
										:label="item.deposit + ' 元'"
										:value="item.deposit"
									/>
								</cl-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="参与结算" prop="is_join_settlement" required>
								<el-radio-group v-model="form.is_join_settlement">
									<el-radio :label="0">不参与结算</el-radio>
									<el-radio :label="1">参与结算</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<!-- <el-col :span="24" v-if="!editing">
							<el-form-item label="是否推送售中" prop="is_push" >
								<el-radio-group v-model="form.is_push">
									<el-radio :label="0" :disabled="form.cus_type == 1">否</el-radio>
									<el-radio :label="1">是</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col> -->
					</el-row>
				</el-card>
			</el-form-item>
			<el-form-item label="定金备注" prop="dep_meno">
				<el-input
					v-model="form.dep_meno"
					placeholder="请填定金备注"
					type="textarea"
					:rows="3"
				/>
			</el-form-item>
		</el-form>
		<audio style="display: none" ref="sound" :src="voice.url" controls />
	</cl-drawer>
</template>
<script>
import dayjs from "dayjs";
import constant from "@/constant";

export default {
	props: {
		detail: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			pickerOptions: {
				disabledDate(time) {
					let now = dayjs();
					let date = dayjs(time);
					return date.isBefore(now.subtract(60, "day")) || date.isAfter(now);
				}
			},
			payTypeList: constant.PAY_TYPE,
			form: {
				dep_id: undefined,
				bra_id: "",
				pay_date: dayjs().format("YYYY-MM-DD"),
				pay_type: "",
				dep_amount: "",
				dep_meno: "",
				is_join_settlement: 0,
				dept_id: "",
				is_push: 0,
				cus_type: "",
				order_id: "",
				matching: false
			},
			rules: {
				pay_date: [{ required: true, message: "请选择收取日期", trigger: "change" }],
				pay_type: [{ required: true, message: "请选择转账方式", trigger: "change" }],
				dep_amount: [{ required: true, message: "请选择收取金额", trigger: "change" }],
				bra_id: [{ required: true, message: "请选择品牌", trigger: "change" }],
				dept_id: [{ required: true, message: "请选择所属门店", trigger: "change" }],
				// order_id: [{ required: true, message: "请选择收款记录", trigger: "change" }],
			},
			depositConfigs: [],
			saving: false,
			editing: false,
			voice: {
				url: "",
				timer: null
			},
			billList: []
		};
	},
	computed: {
		bizRefData() {
			const { biz_id } = this.detail;
			return this.getBizRefData(biz_id);
		}
	},
	methods: {
		async open(editing = false, data = {}) {
			console.log(data, "222222222");
			this.editing = editing;
			this.$refs.drawer.create();
			await this.getAlldata();
			if (editing) {
				Object.keys(this.form).forEach(k => {
					this.form[k] = data[k] ?? "";
				});
				this.form.dep_id = data.id;
				this.form.dep_amount = data.dep_amount * 1;
				console.log(this.form, "2222222222222222222222222");
			} else {
				this.form.dept_id = data.dept_id;
				const { brand } = this.bizRefData;
				if (brand.some(v => v.bra_id == data.bra_id)) {
					this.form.bra_id = data.bra_id;
				} else {
					this.form.bra_id = "";
				}
				// this.form.bra_id = this.brandList[0]?.bra_id ?? "";
			}
			this.form.cus_type = data?.cus_type || "";
			data?.cus_type == 1 ? (this.form.is_push = 1) : ""; //判断是新客的时候默认是
			this.getDeposit();
			this.getBillList();
		},
		reset() {
			this.form = {
				dep_id: undefined,
				bra_id: "",
				pay_date: dayjs().format("YYYY-MM-DD"),
				pay_type: "",
				dep_amount: "",
				deposit_num: "",
				dep_meno: "",
				is_join_settlement: 0,
				dept_id: "",
				is_push: "",
				cus_type: "",
				order_id: "",
				matching: false
			};
			// this.$refs.form.resetFields();
		},
		close() {
			this.$refs.drawer.close();
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				const { cus_id, biz_id, cus_type } = this.detail;
				const { dep_amount, ...args } = this.form;
				let form = {
					...args,
					cus_id,
					biz_id,
					dep_amount
				};
				let deposit = this.depositConfigs.find(v => v.deposit == dep_amount);
				if (!this.form.matching) {
					form.deposit_num = deposit.deposit_num ?? "";
				} else {
					form.deposit_num = this.form.deposit_num;
				}

				this.saving = true;
				await this.$service.deposit[this.editing ? "edit" : "add"](form)
					.then(res => {
						//    window.open(res.url)
						console.log(res.url);
						this.voice.url = res.url;
					})
					.done(() => {
						this.saving = false;
					});
				if (this.editing) {
					this.$message.success("操作成功");
				} else {
					this.$message.success(
						`下定成功，2秒后将自动打开${cus_type == 2 ? "维护" : "新增预约"}`
					);
				}

				this.$emit("confirm", this.editing, this.voice.url);
				this.close();
			});
		},
		async getAlldata() {
			const { biz_id } = this.detail;
			this.getBizRefBrand(biz_id);
			this.getBizRefShop(biz_id);
		},
		async changeBra() {
			if(this.form.matching){
				return
			}
			this.form.dep_amount = "";
			this.getDeposit();
		},
		async getDeposit() {
			const { bra_id } = this.form;
			const { biz_id } = this.detail;
			this.depositConfigs =
				(await this.$service.deposit.configlists({ biz_id, bra_id, status: 1 })) || [];
		},
		async getBillList() {
			await this.$service.deposit.getBillList()
			.then(res => {
				this.billList = res
			});
			console.log(this.billList, 'getbillList')
		},
		matchingChange() {
			this.$service.deposit
				.depositUse({
					order_id: this.form.order_id
				})
				.then(res => {
					console.log(res, "333333333333");
					let qureys = {
						pay_type: res.pay_type,
						money: res.dep_amount,
						dep_amount: res.dep_amount,
						deposit_num: res.deposit_num
					};
					let { ...ages } = this.form;
					this.form = {
						...ages,
						...qureys,
						matching: true
					};
				})
				.catch(err => {
					this.form.matching = false;
				});
		},
		orderIdChange() {
			if (!this.form.order_id) {
				this.form.matching = false;
			}
		}
	}
};
</script>
